<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业3</title>
    <link rel="stylesheet" href="../css/tab.css">
</head>
<body>
    <header>
        <h3>手写完成可切换的选项卡</h3>
    </header>
    
    <main class="tab-panels">

        <ul class="tabs">
            <li ref="panel_1" class="active">第一页</li>
            <li ref="panel_2">第二页</li>
            <li ref="panel_3">第三页</li>
            <li ref="panel_4">第四页</li>
        </ul>
        <div id="panel_1" class="panel active">
            panel_1第一行<br/>
            panel_1第二行<br/>
            panel_1第三行<br/>
            panel_1第四行
        </div>
        <div id="panel_2" class="panel">
            panel_2第一行<br/>
            panel_2第二行<br/>
            panel_2第三行<br/>
            panel_2第四行
        </div>
        <div id="panel_3" class="panel">
            panel_3第一行<br/>
            panel_3第二行<br/>
            panel_3第三行<br/>
            panel_3第四行
        </div>
        <div id="panel_4" class="panel">
            panel_4第一行<br/>
            panel_4第二行<br/>
            panel_4第三行<br/>
            panel_4第四行
        </div>
    </main>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../js/tab.js"></script>
</body>
</html>